import React from 'react';
import Upload from './Upload';
import Icon from './materiels/Icon';
import FileActions from './materiels/FileActions';
import FileButton from './materiels/FileButton';
import { previewFile } from './utils';

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        console.log('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        console.log('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
}

class Avatar extends React.Component {
    static defaultProps = {
        editable: true
    };

    state = {
        loading: false,
        imageUrl: ''
    };

    saveUploadRef = ref => {
        this.uploadRef = ref;
    };

    
    renderBaseButton = ({ loading }) => (
        <>
            {loading ? <Icon type="loading" className="rotating" /> : <Icon type="plus" />}
            <div>Avatar</div>
        </>
    );
    renderImage = ({ file, imageUrl, editable, onDownload, onPreview, onEdit}) => {
        return (
            <>
                <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
                {editable ? (<FileActions
                    className="file-actions--avatar"
                    // listType={listType}
                    // file={file}
                    // breakpoint={breakpoint}
                    // onPause={onPause}
                    // onContinue={onContinue}
                    // onRemove={onRemove}
                    onPreview={onPreview}
                    onDownload={onDownload}
                    // ifShowDownload={ifShowDownload}
                    // ifShowPreview={ifShowPreview}
                    // ifShowRemove={ifShowRemove}
                >
                    <FileButton
                        name="edit"
                        onClick={e => {
                            onEdit(file, e);
                        }}
                    >
                        <Icon type="edit" />
                    </FileButton>
                </FileActions>) : null}
            </>
        );
    };
    render() {
        const { imageUrl } = this.state;
        return (
            <Upload
                {...this.props}
                limit={Infinity}
                className="file-upload--avatar"
                listType="card"
                showUploadList={false}
                ref={this.saveUploadRef}
                beforeUpload={beforeUpload}
                onSelect={() => {
                    this.setState({
                        loading: true,
                        imageUrl: ''
                    });
                }}
                onSuccess={(response, xhr, file) => {
                    previewFile(file).then(result => {
                        this.setState({
                            imageUrl: result,
                            loading: false
                        });
                    });
                }}
                onError={() => {
                    this.setState({
                        loading: false,
                        imageUrl: ''
                    });
                }}
            >
                <div className="file-selector-card file-selector-avatar file-selector-avatar--circle">
                    <div className="file-selector-card_inner file-selector-avatar_inner">
                        {imageUrl ? this.renderImage({
                            ...this.state,
                            ...this.props
                        }) : this.renderBaseButton(this.state)}
                    </div>
                </div>
            </Upload>
        );
    }
}

export default Avatar;
